import React from 'react'
import {Menu, Icon, Modal} from 'antd'
import styles from './index.less'

export default class Menus extends React.Component {

  constructor() {
    super();
    this.state = {
      list: [
        {
          text: '联系方式',
          iconType: 'mail',
          func: 'alert'
        },
        {
          text: '关于本项目',
          iconType: 'link',
          func: 'open'
        }
      ]
    }
  }

  render() {
    return (
      <Menu
      theme='dark'
      onClick={this.click.bind(this)}
      > 
        {
          this.state.list.map((m, i) => {
            return (
              <Menu.Item key={i}>
                <Icon type={m.iconType} />
                {m.text}
              </Menu.Item>
            )
          })
        }
      </Menu>
    );
  }

  click({key}) {
    const item = this.state.list[Number(key)];
    this[item.func]();
  }

  alert() {
    Modal.info({
      title: '联系方式',
      content: (
        <div className={styles.relation}>
          <Icon type='mail' />
          <span>1416017757@qq.com</span>
        </div>
      )
    })
  }

  open() {
    window.open('https://gitee.com/fzstudy/music.git');
  }

}